<template>
  <div class="guides-page">
    <!-- 顶部 Banner -->
    <PageBanner
      title="旅游攻略"
      subtitle="千万旅行者的真实经验分享"
      icon="📖"
      background-image="https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1920&q=80"
      height="350px"
    />

    <!-- 分类导航 -->
    <div class="container">
      <div class="nav-header">
        <section class="category-nav">
        <div
          v-for="cat in categories"
          :key="cat.id"
          class="category-item"
          :class="{ active: activeCategory === cat.id }"
          @click="activeCategory = cat.id"
        >
          <span class="cat-icon">{{ cat.icon }}</span>
          <span class="cat-name">{{ cat.name }}</span>
          <span class="cat-count">{{ cat.count }}</span>
        </div>
      </section>
      <el-button type="primary" class="write-btn" @click="goToWrite">
        <el-icon><Edit /></el-icon>
        写攻略
      </el-button>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="container">
      <div class="main-content">
        <!-- 左侧攻略列表 -->
        <div class="guides-list" v-loading="loading">
          <div
            v-for="guide in filteredGuides"
            :key="guide.id"
            class="guide-item"
            @click="goToGuideDetail(guide.id)"
          >
            <div class="guide-cover">
              <img :src="guide.cover" :alt="guide.title" />
              <span class="guide-category">{{ guide.category }}</span>
            </div>
            <div class="guide-info">
              <h3 class="guide-title">{{ guide.title }}</h3>
              <p class="guide-summary">{{ guide.summary }}</p>
              <div class="guide-meta">
                <div class="author">
                  <img :src="guide.author.avatar" :alt="guide.author.name" />
                  <span>{{ guide.author.name }}</span>
                </div>
                <div class="stats">
                  <span class="stat">
                    <el-icon><View /></el-icon>
                    {{ guide.views }}
                  </span>
                  <span class="stat">
                    <el-icon><ChatDotRound /></el-icon>
                    {{ guide.comments }}
                  </span>
                  <span class="stat">
                    <el-icon><Star /></el-icon>
                    {{ guide.likes }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <aside class="sidebar">
          <!-- 热门作者 -->
          <div class="sidebar-card">
            <h3 class="card-title">🔥 热门作者</h3>
            <div class="authors-list">
              <div v-for="author in hotAuthors" :key="author.id" class="author-item">
                <img :src="author.avatar" :alt="author.name" class="author-avatar" />
                <div class="author-info">
                  <div class="author-name">{{ author.name }}</div>
                  <div class="author-desc">{{ author.guides }}篇攻略</div>
                </div>
                <el-button size="small" text>关注</el-button>
              </div>
            </div>
          </div>

          <!-- 热门标签 -->
          <div class="sidebar-card">
            <h3 class="card-title">🏷️ 热门标签</h3>
            <div class="tags-cloud">
              <span v-for="tag in hotTags" :key="tag" class="tag-item">{{ tag }}</span>
            </div>
          </div>

          <!-- 推荐目的地 -->
          <div class="sidebar-card">
            <h3 class="card-title">📍 推荐目的地</h3>
            <div class="destinations-list">
              <div v-for="dest in recommendDests" :key="dest.id" class="dest-item">
                <img :src="dest.image" :alt="dest.name" />
                <div class="dest-name">{{ dest.name }}</div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { View, ChatDotRound, Star, Edit } from '@element-plus/icons-vue'
import PageBanner from '@/components/common/PageBanner.vue'
// import { getGuideList, getGuideCategories } from '@/api/travel/index.js'

const router = useRouter()
const activeCategory = ref('all')
const loading = ref(false)

// 分类数据
const categories = ref([
  { id: 'all', name: '全部', icon: '🌟', count: 1256 },
  { id: 'food', name: '美食', icon: '🍜', count: 234 },
  { id: 'hotel', name: '住宿', icon: '🏨', count: 189 },
  { id: 'transport', name: '交通', icon: '🚗', count: 156 },
  { id: 'route', name: '路线', icon: '🗺️', count: 298 },
  { id: 'tips', name: '实用贴士', icon: '💡', count: 379 }
])

// 攻略数据
const guides = ref([
  {
    id: 1,
    title: '三亚5天4晚完美攻略 | 人均3000元玩转海岛',
    summary: '详细的行程规划、美食推荐、住宿攻略，带你玩转三亚每个角落。包含亚龙湾、蜈支洲岛、天涯海角等必打卡景点，还有本地人才知道的小众海滩...',
    cover: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=800&q=80',
    category: '路线',
    categoryId: 'route',
    author: {
      name: '旅行达人小王',
      avatar: 'https://i.pravatar.cc/150?img=11'
    },
    views: '12.5k',
    comments: 328,
    likes: 1234
  },
  {
    id: 2,
    title: '成都美食地图 | 本地人推荐的30家馆子',
    summary: '火锅、串串、兔头、钵钵鸡...成都美食太多了！这篇攻略整理了30家本地人常去的馆子，从苍蝇馆子到网红店，保证让你吃到正宗的成都味道...',
    cover: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=800&q=80',
    category: '美食',
    categoryId: 'food',
    author: {
      name: '吃货小陈',
      avatar: 'https://i.pravatar.cc/150?img=12'
    },
    views: '18.2k',
    comments: 567,
    likes: 2156
  },
  {
    id: 3,
    title: '西藏自驾游装备清单 | 新手必看',
    summary: '第一次去西藏自驾需要准备什么？这篇攻略从车辆检查、高反药物、衣物装备、应急物品等方面详细讲解，让你的西藏之旅更安全...',
    cover: 'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=800&q=80',
    category: '实用贴士',
    categoryId: 'tips',
    author: {
      name: '自驾老司机',
      avatar: 'https://i.pravatar.cc/150?img=13'
    },
    views: '25.8k',
    comments: 892,
    likes: 3421
  },
  {
    id: 4,
    title: '丽江古城住宿推荐 | 10家高性价比客栈',
    summary: '丽江古城内外有上千家客栈，如何选择？这篇攻略精选了10家性价比超高的客栈，有古色古香的纳西庭院，也有现代简约的设计酒店...',
    cover: 'https://images.unsplash.com/photo-1508804185872-d7badad00f7d?w=800&q=80',
    category: '住宿',
    categoryId: 'hotel',
    author: {
      name: '云南小李',
      avatar: 'https://i.pravatar.cc/150?img=14'
    },
    views: '9.6k',
    comments: 234,
    likes: 876
  },
  {
    id: 5,
    title: '上海地铁出行指南 | 玩转魔都必备',
    summary: '上海地铁线路复杂，如何高效出行？这篇攻略教你如何使用地铁APP、购买交通卡、规划换乘路线，还有各大景点的地铁出行方案...',
    cover: 'https://images.unsplash.com/photo-1548919973-5cef591cdbc9?w=800&q=80',
    category: '交通',
    categoryId: 'transport',
    author: {
      name: '魔都通',
      avatar: 'https://i.pravatar.cc/150?img=15'
    },
    views: '14.3k',
    comments: 445,
    likes: 1567
  },
  {
    id: 6,
    title: '桂林阳朔美食攻略 | 啤酒鱼必吃榜',
    summary: '来桂林不吃啤酒鱼等于白来！这篇攻略推荐了阳朔西街最好吃的几家啤酒鱼店，还有桂林米粉、螺蛳粉等特色小吃...',
    cover: 'https://images.unsplash.com/photo-1585859695919-c6c4e0c4e5e5?w=800&q=80',
    category: '美食',
    categoryId: 'food',
    author: {
      name: '美食探店',
      avatar: 'https://i.pravatar.cc/150?img=16'
    },
    views: '11.7k',
    comments: 389,
    likes: 1234
  }
])

// 筛选后的攻略
const filteredGuides = computed(() => {
  if (activeCategory.value === 'all') {
    return guides.value
  }
  return guides.value.filter(g => g.categoryId === activeCategory.value)
})

// 热门作者
const hotAuthors = ref([
  { id: 1, name: '旅行达人小王', avatar: 'https://i.pravatar.cc/150?img=21', guides: 128 },
  { id: 2, name: '吃货小陈', avatar: 'https://i.pravatar.cc/150?img=22', guides: 95 },
  { id: 3, name: '自驾老司机', avatar: 'https://i.pravatar.cc/150?img=23', guides: 87 },
  { id: 4, name: '摄影师阿杰', avatar: 'https://i.pravatar.cc/150?img=24', guides: 76 }
])

// 热门标签
const hotTags = ref([
  '三亚', '成都', '西藏', '丽江', '厦门', '桂林',
  '美食', '自驾', '摄影', '亲子游', '穷游', '奢华游'
])

// 推荐目的地
const recommendDests = ref([
  { id: 1, name: '三亚', image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=300&q=80' },
  { id: 2, name: '丽江', image: 'https://images.unsplash.com/photo-1508804185872-d7badad00f7d?w=300&q=80' },
  { id: 3, name: '西藏', image: 'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=300&q=80' },
  { id: 4, name: '桂林', image: 'https://images.unsplash.com/photo-1585859695919-c6c4e0c4e5e5?w=300&q=80' }
])

// 跳转到攻略详情
const goToGuideDetail = (id) => {
  router.push(`/guides/${id}`)
}

// 跳转到写攻略页面
const goToWrite = () => {
  router.push('/guides/write')
}

// 加载攻略列表
const loadGuides = async () => {
  loading.value = true
  try {
    // TODO: 调用API获取攻略列表
    // const res = await getGuideList({
    //   category: activeCategory.value === 'all' ? '' : activeCategory.value,
    //   page: 1,
    //   pageSize: 20
    // })
    // guides.value = res.data.list
    
    // 模拟加载延迟
    await new Promise(resolve => setTimeout(resolve, 300))
  } catch (error) {
    console.error('加载攻略失败:', error)
  } finally {
    loading.value = false
  }
}

// 初始化
onMounted(() => {
  loadGuides()
})
</script>

<style scoped lang="less">
.guides-page {
  min-height: 100vh;
  background: #f8f9fa;
}

// 容器
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

// 导航头部
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 32px 0 0 0;
}

.write-btn {
  flex-shrink: 0;
  height: 44px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);

  &:hover {
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    transform: translateY(-2px);
  }
}

// 分类导航
.category-nav {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  overflow-y: hidden;

  &::-webkit-scrollbar {
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 107, 0.3);
    border-radius: 3px;

    &:hover {
      background: rgba(255, 107, 107, 0.5);
    }
  }
}

.category-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #f5f7fa;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;

  &:hover {
    background: rgba(255, 107, 107, 0.1);
    transform: translateY(-2px);
  }

  &.active {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.3);

    .cat-count {
      background: rgba(255, 255, 255, 0.25);
      color: #fff;
    }
  }

  .cat-icon {
    font-size: 20px;
  }

  .cat-name {
    font-size: 15px;
    font-weight: 600;
  }

  .cat-count {
    font-size: 12px;
    background: rgba(0, 0, 0, 0.05);
    color: #666;
    padding: 2px 10px;
    border-radius: 12px;
  }
}

// 主内容区
.main-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  padding-bottom: 80px;
  margin-top: 32px;
}

// 攻略列表
.guides-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.guide-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  display: flex;
  cursor: pointer;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    .guide-cover img {
      transform: scale(1.05);
    }
  }

  .guide-cover {
    width: 280px;
    height: 200px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .guide-category {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(255, 255, 255, 0.95);
      color: #ff6b6b;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
    }
  }

  .guide-info {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
  }

  .guide-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px 0;
    line-height: 1.4;
  }

  .guide-summary {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 auto 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .guide-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 16px;
  }

  .author {
    display: flex;
    align-items: center;
    gap: 10px;

    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }

    span {
      font-size: 14px;
      color: #666;
    }
  }

  .stats {
    display: flex;
    gap: 20px;
  }

  .stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #999;
  }
}

// 侧边栏
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 20px 0;
}

// 热门作者
.authors-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.author-item {
  display: flex;
  align-items: center;
  gap: 12px;

  .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }

  .author-info {
    flex: 1;
  }

  .author-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
  }

  .author-desc {
    font-size: 12px;
    color: #999;
  }
}

// 热门标签
.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-item {
  padding: 8px 16px;
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #fff;
    transform: translateY(-2px);
  }
}

// 推荐目的地
.destinations-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dest-item {
  position: relative;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dest-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }
}

// 响应式
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .category-nav {
    margin: 24px 0 0 0;
    padding: 16px 0;
  }

  .guide-item {
    flex-direction: column;

    .guide-cover {
      width: 100%;
      height: 180px;
    }
  }

  .sidebar {
    grid-template-columns: 1fr;
  }
}
</style>
